<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <img src="/User-Img/1.jpg" @click="goIndex" style="float: left; left: 2px; top: 7px; position: relative; width: 221px; height: 45px;">

      <el-menu-item style="left: 20px" v-for="item in menu" :index="item.path" :key="item.path">{{
        item.label
      }}</el-menu-item>

      <div class="r-content">
        <!-- 右边的个人信息,没登录不显示 -->
        <div v-if="isLogin">
          <el-dropdown>
            <span class="el-dropdown-link">
              <img
                class="user"
                :src="UserImg.length == 0 ? defaultUserImg : UserImg"
              />
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="toUserinfo"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div
          class="r-content"
          v-else
          @click="login"
          style="line-height: 41px; cursor: pointer"
        >
          <p>登录</p>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import UserApi from "@/api/user/UserApi";
import { mapState } from "vuex";
import store from "@/store";
export default {
  name: "FrontMenu",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      isLogin: false,
      // defaultUserImg: 'https://img0.baidu.com/it/u=2933144277,475331862&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
      // UserImg: ''

      menu: [
        {
          id: "1",
          path: "/frontHome/",
          name: "Index",
          label: "首页",
          icon: "el-icon-s-home",
        },
        {
          id: "2",
          path: "/frontHome/IncreaseMarket",
          name: "IncreaseMarket",
          label: "转赠中心",
          icon: "el-icon-s-home",
        },
        {
          id: "3",
          path: "/frontHome/ShoppingCart",
          name: "ShoppingCart",
          label: "购物车",
          icon: "el-icon-s-home",
        },
        {
          id: "4",
          path: "/frontHome/OrderManagement",
          name: "OrderManagement",
          label: "订单管理",
          icon: "el-icon-s-home",
        },
        {
          id: "5",
          path: "/frontHome/WarehouseManagement",
          name: "WarehouseManagement",
          label: "我的仓库",
          icon: "el-icon-s-home",
        },
        {
          id: "6",
          path: "/frontHome/CustomerManagement",
          name: "CustomerManagement",
          label: "客服管理",
          icon: "el-icon-s-home",
        },
      ],
    };
  },
  created() {
    this.hastoken();
    // 页面渲染时查询用户信息，渲染用户头像，如果没有头像用默认头像
    UserApi.UserInfo().then((res) => {
      // 直接查数据库的头像，并存到vuex
      this.$store.commit("UserInfo/updataUserImg", res.data.data.avatar);
    });
  },
  computed: {
    ...mapState({
      // 获取vuex的默认头像地址
      defaultUserImg: (state) => state.UserInfo.defaultUserImg,
      // 获取vuex的头像地址
      UserImg: (state) => state.UserInfo.userImg,
    }),
  },
  methods: {
    login() {
      this.$router.push({
        name: "Login",
      });
    },
    toUserinfo() {
      // console.log(1)
      this.$router.push({
        path: "/frontHome/UserInfo",
      });
    },
    loginOut() {
      console.log(2);
      // 获取存到浏览器的用户名和密码
      const name = sessionStorage.getItem("userName");
      const id = sessionStorage.getItem("userId");
      UserApi.LoginOut(name, id).then((res) => {
        // 用户退出提示信息
        this.$message.success(res.data.message);
        //清除存在浏览器上的信息
        sessionStorage.clear();
        // 跳转登录页面
        this.$router.push({ path: "/frontHome/" });
        //清除vuex中的menu数据, 防止登录进去显示上次的面包屑
        this.$store.commit("BreadCrumbs/ClearMenu");

        // 重新加载用户状态
        this.hastoken();
      });
    },
    hastoken() {
      if (
        (sessionStorage.getItem("token") != null &&
        sessionStorage.getItem("userAuth") == 1 ) ||
        sessionStorage.getItem("userAuth") == 2
      ) {
        // console.log(sessionStorage.getItem("token"));
        // 已经登录
        this.isLogin = true;
      } else {
        // 没登录
        this.isLogin = false;
      }
    },
    goIndex(){
      this.$router.push({ path: "/frontHome/" });
    },
    handleSelect(key, keyPath) {
      console.log(key);
      this.$router.push({
        path: key,
      });
    },
  },
};
</script>

<style scoped>
.r-content {
  width: 60px;
  height: 60px;
  display: inline-block;
  /* line-height: 60px; */
  color: #909399;
  right: -3px;
  top: 5px;
  position: absolute;
}
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 经过有小手 */
  cursor: pointer;
  margin-top: 5px;
}
</style>
